<!--
  Copyright (c) chb my copyright message. 2022-2023. All rights reserved.

  -->

<template>
  <div>
    <!--  顶部标签  -->
    <van-nav-bar :title="getPlayList.all.name" v-if="getPlayList.all">
      <template #left>
        <van-icon name="zuojiantou" class-prefix="iconfont" size="28px" @click="$router.back()"></van-icon>
      </template>
    </van-nav-bar>
    <div>
      <div v-for="(item,index) in getPlayList.categories" :key="index">
        <van-cell :title="item"></van-cell>
        <div style="display: flex;flex-wrap: wrap;flex-direction: inherit;background: white">
          <div v-for="(items,indexs) in getPlayList.sub" :key="indexs">
            <div v-if="items.category==index" @click="gotoALLPlayList(items.name)"
                 style="background: #f3f3f3;text-align: center;font-size: 14px;border-radius: 15px;padding: 8px 16px;margin: 5px 6px">
              <van-icon name="huo" class-prefix="iconfont" size="14px" color="#ff383a"
                        v-show="items.hot === true"></van-icon>
              {{ items.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import {getPlayListCatlist, getPlayListHighqualityTags, getTopPlayListHighqualityTags} from "../../api/playlist";

export default {
  name: "catTabs",
  data() {
    return {
      getPlayList: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      getPlayListCatlist().then(res => {
        this.getPlayList = res.data
      })

    },
    gotoALLPlayList(cat) {

      this.$router.push({name: 'topPlayList', query: {cat: cat}})
    }
  }
}
</script>

<style scoped>

</style>
